<!DOCTYPE html>
<html>
  <head>
    <title>Tooltip Examples</title>
    <meta charset="utf-8" />

    <script src="https://cdn.jsdelivr.net/npm/d3@5"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>

    <script src="build/vega-tooltip.js"></script>

    <link rel="stylesheet" type="text/css" href="examples.css" />
  </head>

  <body>
    <h1>Vega Tooltip Examples</h1>
    <a href="index.html" class="large">Back to overview</a>
    <div>
      <div id="vis-images" class="tooltip-example"></div>
      <div id="vis-arc" class="tooltip-example"></div>
      <div id="vis-choropleth" class="tooltip-example"></div>
      <div id="vis-force" class="tooltip-example"></div>
      <div id="vis-heatmap" class="tooltip-example"></div>
      <div id="vis-voronoi" class="tooltip-example"></div>
    </div>

    <a href="index.html" class="large">Back to overview</a>
    <a id="github-link" href="https://github.com/vega/vega-tooltip/">Back to Github</a>

    <script type="text/javascript">
      async function addVgExample(path, id, options) {
        const vgSpec = await d3.json(path);
        const handler = new vegaTooltip.Handler(options);
        await vegaEmbed(id, vgSpec, { tooltip: handler.call }).catch(console.error);
      }

      addVgExample("specs/images.json", "#vis-images");
      addVgExample("specs/arc.json", "#vis-arc");
      addVgExample("specs/choropleth.json", "#vis-choropleth");
      addVgExample("specs/force.json", "#vis-force", { theme: "dark" });
      addVgExample("specs/heatmap.json", "#vis-heatmap");
      addVgExample("specs/voronoi.json", "#vis-voronoi");
    </script>
  </body>
</html>
